/**
 * 定义一个名为ReaderTable的常量对象，用于创建读者列表的表格组件
 */
const ReaderTable = {
    // 组件名称
    name: 'ReaderTable',
    // 使用模板字符串定义HTML结构
    template: `
      <table>
        <thead>
        <tr>
            <th>姓名</th> <th>性别</th> <th>联系电话</th>
            <th>邮箱</th> <th>家庭住址</th>   <th>读者证号</th>
            <th>头像</th> <th>备注信息</th> <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 使用v-for指令遍历readers数组，为每个读者生成一行 -->
        <tr v-for="reader in readers" :key="reader.id">
            <td>{{ reader.name }}</td>
            <td>{{ reader.gender }}</td>
            <td>{{ reader.phone }}</td>
            <td>{{ reader.email }}</td>
            <td>{{ reader.address }}</td>
            <td>{{ reader.cardNumber }}</td>
            <td>
                <!-- 根据是否有头像URL，决定显示头像图片还是显示“无” -->
                <div v-if="reader.avatarUrl" class="preview">
                    <img :src="reader.avatarUrl" alt="头像预览" style="max-width: 50px; max-height: 50px;">
                </div>
                <div v-else>无</div>
            </td>
            <td>{{ reader.remark }}</td>
            <td>
                <!-- 编辑和删除按钮，点击时触发相应的事件 -->
                <button style="margin-right: 5px" @click="$emit('edit', reader)">编辑</button>
                <button @click="$emit('delete', reader.id)">删除</button>
            </td>
        </tr>
        </tbody>
      </table>
    `,
    // 定义组件的属性
    props: {
        // 读者数组，类型为Array，默认值为空数组
        readers: {
            type: Array,
            default: () => [],
        }
    },
    // 使用setup函数定义组件的响应式属性和方法
    setup() {
        // 这里如果有需要根据读者状态等进行转换的方法，可以在这里定义
        // 目前暂未涉及，所以没有额外的方法
        return {};
    }
};